<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<base href="${path}/pages/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>个人博客后台管理</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	
<div class="layui-fluid">

	<div class="layui-card-body">
		<div class="layui-btn-group">
			<button class="layui-btn layui-btn-normal toolbar" data-type="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
			<button class="layui-btn layui-btn-danger toolbar" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i> 删除</button>
		</div>
		
		<table id="lay-table" lay-filter="lay-table"></table>
		
	</div>

	
	
</div>
	
<!-- 自定义模板 -->
<script type="text/html" id="tr-opts">
   	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
  	
<script src="../layui/layui.js"></script>
<script>
layui.use(['table', 'layer'], function() {
	var table = layui.table;
	var layer = layui.layer;
	var $ = layui.$;
	
	//表格渲染
	table.render({
	    elem: '#lay-table',
	    height: 'full-80',
	    method: 'post',
	    url: '${path}/action/sort/talist',		//ajax请求
	   	page: true,
	   	even: true,
	    cols: [[ //表头
	    	{checkbox: true},
	    	{title:'#', type:'numbers', align:'center', width:40},
	      	{field: 'sort_name', title: '分类名称', align:'center', width:180},
	      	{field: 'sort_alias', title: '分类权重', align:'center',width:40},
	    	{field: 'sort_description', title: '分类描述', align:'center', sort:true},
	      	{title: '操作', fixed: 'right', width: 160, align: 'center', toolbar: '#tr-opts'}
	    ]],
	    limits: [15, 30, 50, 100, 200], 
		limit: 15,
		loading: true,
		autoSort: false
	  });
	
	// 表格行的工具栏
    table.on('tool(lay-table)', function(obj) {
        var data = obj.data;
        if(obj.event === 'del') {
            layer.confirm('您确定要删除行吗？', function(index) {
            	// jquery的ajax， $.getJSON(), $.post(), $.ajax()
            	$.ajax({
            		type: 'post',
    				url: '${path}/action/sort/del',
    				data: {
    					id: data.sort_id
    				},
    				success: function(json) {
    					
              			layer.msg('删除成功！');	
    					table.reload('lay-table');
    				}        				
    			});
            })
        } else if(obj.event === 'edit') {
        	layer.open({
          		type: 2,  //打开一个iframe
          		title: '编辑分类',
          		content: '${path}/action/sort/getone?id='+ data.sort_id,
          		maxmin: true,
          		area: ['800px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
        }
    });
	
  	//监听排序事件 
    table.on('sort(lay-table)', function(obj) {
    	table.reload('lay-table', {
    		initSort: obj,
    		where: {
    			orderBy: obj.field,
    			orderDir: obj.type
    		}  		
    	});
    });
	
 	// toolbar工具栏
	var active = {
  		batchdel: function() {
    		var checkData = table.checkStatus('lay-table').data; //得到选中的数据
    		if(checkData.length === 0) {
    			layer.msg('请选择数据');
      			return false;
    		}
    			
    		var idArr = [];
    		for(var i=0; i<checkData.length; i++) {
    			idArr.push(checkData[i].sort_id);
    		}
    		alert(idArr);
    		layer.confirm('确定删除吗？', function(index) {
    			$.ajax({
    				type: 'post',
    				url: '${path}/action/sort/multiDel',
    				data: {
    					ids: idArr.join(',')
    				},
    				success: function(json) {
    					table.reload('lay-table');
              			layer.msg(json.msg);
    				}        				
    			});          			
    		});
  		},
      	add: function() {
        	layer.open({
          		type: 2,
          		title: '增加分类',
          		content: '${path}/admin/sort_form.jsp',
          		maxmin: true,
          		area: ['800px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
            		//点击确认触发 iframe 内容中的按钮提交
            		var submit = layero.find('iframe').contents().find("#lay-form-submit");
            		submit.click();
          		}
        	}); 
  		}
 	};
	
    $('.toolbar').on('click', function(){
  		var type = $(this).data('type');
  		active[type] ? active[type].call(this) : '';
	});
		
});

</script>

</body>
</html>